<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>创建可拖动的点</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>


    <style>
        .coordinates {
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            bottom: 40px;
            left: 10px;
            padding: 5px 10px;
            margin: 0;
            font-size: 11px;
            line-height: 18px;
            border-radius: 3px;
            display: none;
        }
    </style>

    <div id='map'></div>
    <pre id='coordinates' class='coordinates'></pre>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tjeXBrN3JjMGM0ZzJ3cnl0OWJscHlxYSJ9.GsQMG6Tfi05l4BbRqegJeQ';

        var coordinates = document.getElementById('coordinates');

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [114.05, 22.8],
            zoom: 2
        });

        const data = [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [108.032, 38.913],
                },
                properties: {
                    title: 'Mapbox',
                    description: 'Washington, D.C.',
                },
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [110.414, 37.776],
                },
                properties: {
                    title: 'Mapbox',
                    description: 'San Francisco, California',
                },
            },
        ];

        map.on('load', function () {
            // Add a layer showing the places.
            map.addLayer({
                id: 'places',
                type: 'symbol',
                source: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: data,
                    },
                },
                layout: {
                    'icon-image': 'airport-15',
                    'icon-allow-overlap': true,
                },
            });

            // Create a popup, but don't add it to the map yet.
            const popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false,
            });

            map.on('mouseenter', 'places', function (e) {
                // Change the cursor style as a UI indicator.
                map.getCanvas().style.cursor = 'pointer';

                // Populate the popup and set its coordinates based on the feature.
                const coordinates = e.features[0].geometry.coordinates.slice();
                const { title, description } = e.features[0].properties;

                popup.setLngLat(coordinates).setHTML(`<h3>${title}</h3><p>${description}</p>`).addTo(map);
            });

            map.on('mouseleave', 'places', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });
        });











    </script>

</body>

</html>